<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>${sysName}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" href="${ctx}/resources/image/logo.png"/>
    <link rel="bookmark" href="${ctx}/resources/image/logo.png"/>
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/css/style.css" media="all">
</head>
<body>
<div id="app" v-cloak>
    <div class="layui-fluid">
        <!--数据统计 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm6 layui-col-md2 header_statistics_box :nth-child(1)">
                <div class="layui-card  header_statistics">
                    <div class="layui-card-header" style="color: white">
                        经营户
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" style="color: white">{{individualTotal}}</p>
                        <p>
                            单位
                            <span class="layuiadmin-span-color">户 <i
                                    class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md2 header_statistics_box  :nth-child(2)">
                <div class="layui-card   header_statistics">
                    <div class="layui-card-header " style="color: white">
                        摄像头
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" style="color: white">{{camersTotal}}</p>
                        <p>
                            单位
                            <span class="layuiadmin-span-color">个 <i
                                    class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md2  header_statistics_box :nth-child(3)">
                <div class="layui-card header_statistics">
                    <div class="layui-card-header" style="color: white">
                        监管员
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" style="color: white">{{superviseUserTotal}}</p>
                        <p>
                            单位
                            <span class="layuiadmin-span-color">位 <i
                                    class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md2  header_statistics_box :nth-child(4)">
                <div class="layui-card  header_statistics">
                    <div class="layui-card-header" style="color: white">
                        消费者
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">总</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" style="color: white">{{customerTotal}}</p>
                        <p>
                            单位
                            <span class="layuiadmin-span-color">用户 <i
                                    class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md2  header_statistics_box :nth-child(5)">
                <div class="layui-card  header_statistics">
                    <div class="layui-card-header " style="color: white">
                        待办事件
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" style="color: white">{{daiban}}</p>
                        <p>
                            单位
                            <span class="layuiadmin-span-color">事件 <i
                                    class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md2  header_statistics_box :nth-child(6)">
                <div class="layui-card  header_statistics">
                    <div class="layui-card-header" style="color: white">
                        访问数量
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" style="color: white">{{accessTotal}}</p>
                        <p>
                            单位
                            <span class="layuiadmin-span-color">次数 <i
                                    class="layui-inline layui-icon layui-icon-flag"></i></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <%--数据预览--%>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-col-md12">
                    <div class="layui-card echart_card">
                        <div class="layui-card-body">
                            <div id="main" class="layui-col-md12" style="height:400px;"></div>
                        </div>
                    </div>
                    <div class="layui-card echart_card">
                        <div class="layui-card-body">
                            <div id="main3" class="layui-col-md12" style="height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">服务版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>当前版本</td>
                                <td>
                                    V 1.0.0
                                </td>
                            </tr>
                            <tr>
                                <td>状态</td>
                                <td>
                                    正常
                                </td>
                            </tr>
                            <tr>
                                <td>异常</td>
                                <td>0个</td>
                            </tr>
                            <tr>
                                <td>访问</td>
                                <td style="padding-bottom: 0;">
                                    {{accessTotal}}次
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"
                         style="display: flex;flex-direction: row;align-items:center;justify-content:space-between">
                        <div>最近登录用户</div>
                    </div>
                    <div class="layui-card-body layadmin-takerates">
                        <el-table :data="loginRecordData" border stripe v-loading="loading" :height="tableH"
                                  ref="table">
                            <el-table-column prop="headImage" label="头像" min-width="80">
                                <template scope="scope">
                                    <el-image style="width: 40px; height: 40px" :src="scope.row.headUrl"
                                              :preview-src-list="previewList(scope.row)"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="account" label="账号" min-width="80"></el-table-column>
                            <el-table-column prop="visitTime" label="登录时间" min-width="100"
                                             :formatter="dateFormat">
                                <template scope="scope">

                                    <div style="font-size: 13px; display: flex;align-items: center">
                                        <i class="el-icon-time"></i>
                                        {{scope.row.visitTimeStr}}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/resources/layuiadmin/layui/layui.js"></script>
<script src="${ctx}/resources/layuiadmin/echarts.min.js"></script>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });
    var app = new Vue({
        el: '#app',
        data: {
            tableH: $(window).height() - 155,
            loading: false,
            loginRecordData: [],
            individualTotal: 0,
            superviseUserTotal: 0,
            camersTotal: 0,
            customerTotal: 0,
            accessTotal: 0,
            daiban: 0
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData: function () {
                var that = this
                that.loading = true;
                var data = {};
                // 获取经营户总数
                $.ajax({
                    url: "${ctx}/backstage/home/getIndividualTotal",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            console.log("getIndividualTotal请求成功==" + JSON.stringify(returndata))
                            app.individualTotal = returndata.data
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
                // 请求监管员
                $.ajax({
                    url: "${ctx}/backstage/home/getSuperviseUserTotal",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        console.log("getSuperviseUserTotal==" + JSON.stringify(returndata))
                        if (returndata.success) {
                            app.superviseUserTotal = returndata.data
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
                // 摄像头
                $.ajax({
                    url: "${ctx}/backstage/home/getCamersTotal",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            console.log("getCamersTotal==" + JSON.stringify(returndata))
                            app.camersTotal = returndata.data
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
                // 消费者用户量
                $.ajax({
                    url: "${ctx}/backstage/home/getCustomerTotal",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        console.log("getCustomerTotal==" + JSON.stringify(returndata))
                        if (returndata.success) {
                            app.customerTotal = returndata.data
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
                // 总访问量
                $.ajax({
                    url: "${ctx}/backstage/home/getAccessTotal",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        console.log("getAccessTotal==" + JSON.stringify(returndata))
                        if (returndata.success) {
                            that.accessTotal = returndata.data
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });

                //获取最近登录
                $.ajax({
                    url: "${ctx}/backstage/home/getLoginRecord",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.loginRecordData = returndata.data
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                if (date.length < 10) {
                    var date = new Date(date * 1000); //如果date为10位不需要乘1000
                } else {
                    var date = new Date(date);
                }
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y + M + D;
            },
            previewList: function (row) {
                var arr = [];
                arr.push(row.headUrl);
                return arr;
            }
        }
    });
</script>
<script>
    function getBeforeDate(number) {
        const num = number;
        const date = new Date();
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        if (day <= num) {
            if (mon > 1) {
                mon = mon - 1;
            } else {
                year = year - 1;
                mon = 12;
            }
        }
        date.setDate(date.getDate() - num);
        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
        const s = (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day);
        return s;
    }

    console.log(getBeforeDate(7))
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'));
    var myChart3 = echarts.init(document.getElementById('main3'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '最近七日访问量'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#7EC9C2'
                }
            }
        },
        legend: {
            data: [""]
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '今日访问量',
                type: 'line',
                stack: '总量',
                color: ['#7EC9C2'],
                areaStyle: {},
                data: [120, 102, 141, 110, 150, 120, 140]
            }
        ]
    };
    var option3 = {
        title: {
            text: '预警统计',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['违规预警', '陌生人预警', '餐具预警', '晨检预警', '老鼠预警']
        },
        series: [
            {
                name: '次数统计',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 20, name: '违规预警'},
                    {value: 26, name: '陌生人预警'},
                    {value: 10, name: '餐具预警'},
                    {value: 0, name: '晨检预警'},
                    {value: 0, name: '老鼠预警'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    var arr = []
    for (let i = 6; i >= 0; i--) {
        arr.push(getBeforeDate(i))
    }
    option1.xAxis[0].data = arr
    myChart1.setOption(option1);
    myChart3.setOption(option3);
</script>
</body>
